<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文旅商城 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }
        .search-bar {
            background-color: white;
            border-radius: 20px;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }
        .category-tab {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            padding: 0 8px;
            background-color: white;
        }
        .category-item {
            padding: 12px 16px;
            font-size: 14px;
            position: relative;
        }
        .category-item.active {
            color: #0052d9;
            font-weight: 500;
        }
        .category-item.active::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: 16px;
            right: 16px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 3px;
        }
        .banner {
            height: 160px;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }
        .banner-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .banner-text {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
            color: white;
        }
        .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .grid-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .product-image {
            height: 140px;
            object-fit: cover;
        }
        .tag {
            background-color: rgba(0,82,217,0.1);
            color: #0052d9;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 12px;
            margin-right: 6px;
            display: inline-block;
        }
        .price {
            color: #ff4d4f;
            font-weight: bold;
        }
        .bottom-nav {
            border-top: 1px solid #eee;
            background: white;
            padding: 8px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        .bottom-nav-item.active {
            color: #0052d9;
        }
        .category-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
        }
        .category-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: #f5f7fa;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            color: #0052d9;
        }
    </style>
</head>
<body>
    <div class="pb-16"> <!-- 底部导航栏的空间 -->
        <!-- 顶部搜索栏 -->
        <div class="p-4 bg-white sticky top-0 z-10">
            <div class="search-bar">
                <i class="t-icon t-icon-search text-gray-400 mr-2"></i>
                <input type="text" placeholder="搜索商品、景点、酒店..." class="flex-1 text-sm border-none outline-none bg-transparent">
            </div>
        </div>
        
        <!-- 分类选项卡 -->
        <div class="category-tab">
            <div class="category-item active">全部</div>
            <div class="category-item">特产美食</div>
            <div class="category-item">康养产品</div>
            <div class="category-item">民宿酒店</div>
            <div class="category-item">景点门票</div>
            <div class="category-item">手工艺品</div>
        </div>
        
        <!-- 主要内容区 -->
        <div class="p-4">
            <!-- 促销Banner -->
            <div class="banner mb-4">
                <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d" alt="促销活动" class="banner-img">
                <div class="banner-text">
                    <h2 class="text-lg font-bold">贵州特产美食节</h2>
                    <p class="text-sm opacity-80">限时8折，特色产品抢购中</p>
                </div>
            </div>
            
            <!-- 商品分类图标 -->
            <div class="bg-white rounded-xl p-4 mb-4">
                <div class="category-grid">
                    <div class="flex flex-col items-center">
                        <div class="category-icon bg-blue-50">
                            <i class="t-icon t-icon-shop text-blue-600"></i>
                        </div>
                        <span class="text-xs">特产</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="category-icon bg-green-50">
                            <i class="t-icon t-icon-heart text-green-600"></i>
                        </div>
                        <span class="text-xs">康养</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="category-icon bg-purple-50">
                            <i class="t-icon t-icon-home text-purple-600"></i>
                        </div>
                        <span class="text-xs">民宿</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="category-icon bg-orange-50">
                            <i class="t-icon t-icon-discount text-orange-600"></i>
                        </div>
                        <span class="text-xs">门票</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="category-icon bg-red-50">
                            <i class="t-icon t-icon-gift text-red-600"></i>
                        </div>
                        <span class="text-xs">手工艺</span>
                    </div>
                </div>
            </div>
            
            <!-- 平台推荐 -->
            <div class="mb-6">
                <div class="section-title">
                    <span>强烈推荐</span>
                    <span class="text-sm font-normal text-blue-600">查看更多</span>
                </div>
                
                <div class="grid grid-cols-2 gap-3">
                    <!-- 推荐商品1 -->
                    <div class="grid-card">
                        <img src="https://images.unsplash.com/photo-1591189863430-ab87e7f8e8dd" alt="苗药足浴包" class="product-image w-full">
                        <div class="p-3">
                            <h3 class="font-medium text-sm mb-1">贵州苗药足浴包（10袋装）</h3>
                            <div class="flex mt-1">
                                <span class="tag">清热解毒</span>
                                <span class="tag">舒缓疲劳</span>
                            </div>
                            <div class="flex justify-between items-center mt-2">
                                <div class="price">¥128</div>
                                <div class="text-xs text-gray-500">已售589</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 推荐商品2 -->
                    <div class="grid-card">
                        <img src="https://images.unsplash.com/photo-1547592180-85f173990554" alt="贵州绿茶" class="product-image w-full">
                        <div class="p-3">
                            <h3 class="font-medium text-sm mb-1">都匀毛尖绿茶礼盒装</h3>
                            <div class="flex mt-1">
                                <span class="tag">明前茶</span>
                                <span class="tag">送礼佳品</span>
                            </div>
                            <div class="flex justify-between items-center mt-2">
                                <div class="price">¥298</div>
                                <div class="text-xs text-gray-500">已售423</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 特色美食 -->
            <div class="mb-6">
                <div class="section-title">
                    <span>特色美食</span>
                    <span class="text-sm font-normal text-blue-600">查看更多</span>
                </div>
                
                <div class="space-y-3">
                    <!-- 美食商品1 -->
                    <div class="bg-white p-3 rounded-xl flex">
                        <div class="w-24 h-24 bg-gray-100 rounded-lg overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d" alt="酸汤鱼调料" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h3 class="font-medium">贵州黔东南酸汤鱼调料套装</h3>
                            <p class="text-xs text-gray-500 mt-1">正宗苗家配方，酸爽可口，送两包鱼胶原</p>
                            <div class="flex mt-2">
                                <span class="tag">酸辣鲜香</span>
                                <span class="tag">家常美味</span>
                            </div>
                            <div class="flex justify-between items-center mt-2">
                                <div class="price">¥59.8</div>
                                <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-xs">加入购物车</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 美食商品2 -->
                    <div class="bg-white p-3 rounded-xl flex">
                        <div class="w-24 h-24 bg-gray-100 rounded-lg overflow-hidden mr-3">
                            <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445" alt="牛肉干" class="w-full h-full object-cover">
                        </div>
                        <div class="flex-1">
                            <h3 class="font-medium">贵州高原牦牛肉干礼盒</h3>
                            <p class="text-xs text-gray-500 mt-1">高蛋白低脂肪，五种口味，原生态放养牦牛</p>
                            <div class="flex mt-2">
                                <span class="tag">高原特产</span>
                                <span class="tag">营养丰富</span>
                            </div>
                            <div class="flex justify-between items-center mt-2">
                                <div class="price">¥168</div>
                                <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-xs">加入购物车</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 康养产品 -->
            <div class="mb-6">
                <div class="section-title">
                    <span>康养产品</span>
                    <span class="text-sm font-normal text-blue-600">查看更多</span>
                </div>
                
                <div class="grid grid-cols-2 gap-3">
                    <!-- 康养商品1 -->
                    <div class="grid-card">
                        <img src="https://images.unsplash.com/photo-1519415510236-718bdfcd89c8" alt="艾草香包" class="product-image w-full">
                        <div class="p-3">
                            <h3 class="font-medium text-sm mb-1">贵州手工艾草香包</h3>
                            <div class="flex mt-1">
                                <span class="tag">安神助眠</span>
                                <span class="tag">驱蚊</span>
                            </div>
                            <div class="flex justify-between items-center mt-2">
                                <div class="price">¥39.9</div>
                                <div class="text-xs text-gray-500">已售723</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 康养商品2 -->
                    <div class="grid-card">
                        <img src="https://images.unsplash.com/photo-1531889214843-a9b5dfdbf816" alt="中药枕头" class="product-image w-full">
                        <div class="p-3">
                            <h3 class="font-medium text-sm mb-1">苗药草本安神枕</h3>
                            <div class="flex mt-1">
                                <span class="tag">改善睡眠</span>
                                <span class="tag">缓解头痛</span>
                            </div>
                            <div class="flex justify-between items-center mt-2">
                                <div class="price">¥199</div>
                                <div class="text-xs text-gray-500">已售318</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 民宿酒店 -->
            <div class="mb-6">
                <div class="section-title">
                    <span>民宿酒店</span>
                    <span class="text-sm font-normal text-blue-600">查看更多</span>
                </div>
                
                <div class="space-y-3">
                    <!-- 民宿1 -->
                    <div class="bg-white rounded-xl overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945" alt="青岩古镇客栈" class="w-full h-40 object-cover">
                        <div class="p-3">
                            <div class="flex justify-between">
                                <h3 class="font-medium">青岩古镇温泉客栈</h3>
                                <div class="text-orange-500">
                                    <span class="font-medium">4.9</span>
                                    <span class="text-xs">分</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">明清古建筑风格，配套私家温泉，提供地道苗家早餐</p>
                            <div class="flex mt-2">
                                <span class="tag">私家温泉</span>
                                <span class="tag">古镇中心</span>
                            </div>
                            <div class="flex justify-between items-center mt-2">
                                <div>
                                    <span class="price">¥458</span>
                                    <span class="text-xs text-gray-500">起/晚</span>
                                </div>
                                <button class="bg-blue-600 text-white px-3 py-1 rounded-full text-xs">查看详情</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-home"></i>
            <span>首页</span>
        </div>
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-location"></i>
            <span>周边</span>
        </div>
        <div class="bottom-nav-item active">
            <i class="t-icon t-icon-shop"></i>
            <span>商城</span>
        </div>
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-user"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 